import './jingping.scss'
import React, { Component } from 'react';
import axios from "axios"
import { Swiper, SwiperSlide } from 'swiper/react';
import {Link} from "react-router-dom"
import 'swiper/swiper.scss';
import Footer from "../../../../components/footer/footer"
class Jingping extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            jpList:[],
            jpList1:[],
            jpList2:[],
            jpList3:[],
            jpList4:[],
            jpList5:[],
            jpList6:[],
         }
    }
    componentDidMount() {
        axios.get("/item/ws/group_list?current_page=1&page_size=100&group_id=40554&device_id=cad861f0-a7c0-11eb-9b53-8528537369c7").then((res)=>{
            console.log(res.data.data.item_list)
            this.setState({jpList:res.data.data.item_list})
        })
        axios.get("/item/ws/group_list?current_page=1&page_size=8&group_id=40642&device_id=cad861f0-a7c0-11eb-9b53-8528537369c7").then((res)=>{
            console.log(res.data.data.item_list)
            this.setState({jpList1:res.data.data.item_list})
        })
        axios.get("/item/ws/group_list?current_page=1&page_size=8&group_id=40623&device_id=cad861f0-a7c0-11eb-9b53-8528537369c7").then((res)=>{
            console.log(res.data.data.item_list)
            this.setState({jpList2:res.data.data.item_list})
        })
        axios.get("/item/ws/group_list?current_page=1&page_size=100&group_id=40612&device_id=cad861f0-a7c0-11eb-9b53-8528537369c7").then((res)=>{
            console.log(res.data.data.item_list)
            this.setState({jpList3:res.data.data.item_list})
        })
        axios.get("/item/ws/group_list?current_page=1&page_size=100&group_id=40761&device_id=cad861f0-a7c0-11eb-9b53-8528537369c7").then((res)=>{
            console.log(res.data.data.item_list)
            this.setState({jpList4:res.data.data.item_list})
        })
        axios.get("/item/ws/group_list?current_page=1&page_size=100&group_id=40704&device_id=cad861f0-a7c0-11eb-9b53-8528537369c7").then((res)=>{
            console.log(res.data.data.item_list)
            this.setState({jpList5:res.data.data.item_list})
        })
        axios.get("/item/ws/group_list?current_page=1&page_size=100&group_id=40735&device_id=cad861f0-a7c0-11eb-9b53-8528537369c7").then((res)=>{
            console.log(res.data.data.item_list)
            this.setState({jpList6:res.data.data.item_list})
        })
    }
    render() { 
        const {jpList,jpList1,jpList2,jpList3,jpList4,jpList5,jpList6,}=this.state
        return ( 
        <>
            <div className="jingping">
                <div className="imgtop"><img src="https://image.watsons.com.cn//upload/170f904b.jpg?x-oss-process=image/quality,q_80/format,webp" alt=""/></div>
                <div className="imgtop"><img src="https://image.watsons.com.cn//upload/b94032bf.jpg?x-oss-process=image/indexcrop,y_800,i_0/quality,q_80/format,webp" alt=""/></div>

                <div>
                    <Swiper
                        // spaceBetween={50}
                        slidesPerView={3.5}
                        onSlideChange={() => console.log('slide change')}
                        onSwiper={(swiper) => console.log(swiper)}
                    >
                        {
                            jpList.map((item,index)=><SwiperSlide key={item.item_id}><Link to={{pathname:"/item",state:item}}><div className="jptu">
                                <div className="img"><img src={item.over_image_url} alt=""/></div>
                                <div className="name">{item.item_long_name}</div>
                                <div className="price">￥{item.min_app_price/100}</div>
                                {
                                    item.stock_num===0?<div className="stock_num">已售完</div>:null
                                }
                                
                            </div></Link></SwiperSlide>)
                        }
                        
                        
                   </Swiper>
                </div>
            </div>
            <div className="jingping">
                <div className="imgtop"></div>
                <div className="imgtop"><img src="https://image.watsons.com.cn//upload/cad70f29.jpg?x-oss-process=image/indexcrop,y_800,i_0/quality,q_80/format,webp" alt=""/></div>

                <div>
                    <Swiper
                        // spaceBetween={50}
                        slidesPerView={3.5}
                        onSlideChange={() => console.log('slide change')}
                        onSwiper={(swiper) => console.log(swiper)}
                    >
                        {
                            jpList1.map((item,index)=><SwiperSlide key={item.item_id}><Link to={{pathname:"/item",state:item}}><div className="jptu">
                                <div className="img"><img src={item.over_image_url} alt=""/></div>
                                <div className="name">{item.item_long_name}</div>
                                <div className="price">￥{item.min_app_price/100}</div>
                                {
                                    item.stock_num===0?<div className="stock_num">已售完</div>:null
                                }
                                
                            </div></Link></SwiperSlide>)
                        }
                        
                        
                   </Swiper>
                </div>
            </div>
            <div className="jingping">
                <div className="imgtop"></div>
                <div className="imgtop"><img src="https://image.watsons.com.cn//upload/1425f91c.jpg?x-oss-process=image/indexcrop,y_800,i_0/quality,q_80/format,webp" alt=""/></div>

                <div>
                    <Swiper
                        // spaceBetween={50}
                        slidesPerView={3.5}
                        onSlideChange={() => console.log('slide change')}
                        onSwiper={(swiper) => console.log(swiper)}
                    >
                        {
                            jpList2.map((item,index)=><SwiperSlide key={item.item_id}><Link to={{pathname:"/item",state:item}}><div className="jptu">
                                <div className="img"><img src={item.over_image_url} alt=""/></div>
                                <div className="name">{item.item_long_name}</div>
                                <div className="price">￥{item.min_app_price/100}</div>
                                {
                                    item.stock_num===0?<div className="stock_num">已售完</div>:null
                                }
                                
                            </div></Link></SwiperSlide>)
                        }
                        
                        
                   </Swiper>
                </div>
            </div>
            <div className="jingping">
                <div className="imgtop"></div>
                <div className="imgtop"><img src="https://image.watsons.com.cn//upload/688a3153.jpg?x-oss-process=image/indexcrop,y_800,i_0/quality,q_80/format,webp" alt=""/></div>

                <div>
                    <Swiper
                        // spaceBetween={50}
                        slidesPerView={3.5}
                        onSlideChange={() => console.log('slide change')}
                        onSwiper={(swiper) => console.log(swiper)}
                    >
                        {
                            jpList3.map((item,index)=><SwiperSlide key={item.item_id}><Link to={{pathname:"/item",state:item}}><div className="jptu">
                                <div className="img"><img src={item.over_image_url} alt=""/></div>
                                <div className="name">{item.item_long_name}</div>
                                <div className="price">￥{item.min_app_price/100}</div>
                                {
                                    item.stock_num===0?<div className="stock_num">已售完</div>:null
                                }
                                
                            </div></Link></SwiperSlide>)
                        }
                        
                        
                   </Swiper>
                </div>
            </div>
            <div className="jingping">
                <div className="imgtop"></div>
                <div className="imgtop"><img src="https://image.watsons.com.cn//upload/08ac5b09.jpg?x-oss-process=image/quality,q_80/format,webp" alt=""/></div>

                <div>
                    <Swiper
                        // spaceBetween={50}
                        slidesPerView={3.5}
                        onSlideChange={() => console.log('slide change')}
                        onSwiper={(swiper) => console.log(swiper)}
                    >
                        {
                            jpList4.map((item,index)=><SwiperSlide key={item.item_id}><Link to={{pathname:"/item",state:item}}><div className="jptu">
                                <div className="img"><img src={item.over_image_url} alt=""/></div>
                                <div className="name">{item.item_long_name}</div>
                                <div className="price">￥{item.min_app_price/100}</div>
                                {
                                    item.stock_num===0?<div className="stock_num">已售完</div>:null
                                }
                                
                            </div></Link></SwiperSlide>)
                        }
                        
                        
                   </Swiper>
                </div>
            </div>
            <div className="jingping">
                <div className="imgtop"></div>
                <div className="imgtop"><img src="https://image.watsons.com.cn//upload/d09213b5.jpg?x-oss-process=image/indexcrop,y_800,i_0/quality,q_80/format,webp" alt=""/></div>

                <div>
                    <Swiper
                        // spaceBetween={50}
                        slidesPerView={3.5}
                        onSlideChange={() => console.log('slide change')}
                        onSwiper={(swiper) => console.log(swiper)}
                    >
                        {
                            jpList5.map((item,index)=><SwiperSlide key={item.item_id}><Link to={{pathname:"/item",state:item}}><div className="jptu">
                                <div className="img"><img src={item.over_image_url} alt=""/></div>
                                <div className="name">{item.item_long_name}</div>
                                <div className="price">￥{item.min_app_price/100}</div>
                                {
                                    item.stock_num===0?<div className="stock_num">已售完</div>:null
                                }
                                
                            </div></Link></SwiperSlide>)
                        }
                        
                        
                   </Swiper>
                </div>
            </div>
            <div className="jingping">
                <div className="imgtop"></div>
                <div className="imgtop"><img src="https://image.watsons.com.cn//upload/abc3556c.jpg?x-oss-process=image/indexcrop,y_800,i_0/quality,q_80/format,webp" alt=""/></div>

                <div>
                    <Swiper
                        // spaceBetween={50}
                        slidesPerView={3.5}
                        onSlideChange={() => console.log('slide change')}
                        onSwiper={(swiper) => console.log(swiper)}
                    >
                        {
                            jpList6.map((item,index)=><SwiperSlide key={item.item_id}><Link to={{pathname:"/item",state:item}}><div className="jptu">
                                <div className="img"><img src={item.over_image_url} alt=""/></div>
                                <div className="name">{item.item_long_name}</div>
                                <div className="price">￥{item.min_app_price/100}</div>
                                {
                                    item.stock_num===0?<div className="stock_num">已售完</div>:null
                                }
                                
                            </div></Link></SwiperSlide>)
                        }
                        
                        
                   </Swiper>
                </div>
            </div>
            <div className="jp_fimg"><img src="https://image.watsons.com.cn//upload/33e0af68.jpg?x-oss-process=image/quality,q_80/format,webp" alt=""/></div>
            <div className="jp_fimg"><img src="https://image.watsons.com.cn//upload/8c3676f5.jpg?x-oss-process=image/quality,q_80/format,webp" alt=""/></div>
            <Footer></Footer>
            </>
         );
    }
}
 
export default Jingping;